---
title: "Accessibility Checker Rule Help: Rpt_Aria_MultipleBannerLandmarks_Implicit"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Multiple elements with `"banner"` role do not have unique labels

<div id="locLevel"></div>

Each element with a `"banner"` role must have a unique label that describes its purpose

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

An HTML `<header>` element that is a descendant of the `<body>` element, or any element with an explicit `"banner"` role is a type of WAI-ARIA landmark region that identifies site-oriented content at the beginning of the page. When the page includes more than one banner region, each should have a unique label, so people who use assistive technologies can quickly identify and navigate to each `"banner"` region.

<div id="locSnippet"></div>

### What to do

* For each `<header>` element that is a descendant of the `<body>` element, and each element with `role="banner"`, either set the value of the `aria-labelledby` attribute of each banner to the `id` value of any visible text that appropriately and uniquely describes that banner's purpose;
* OR, use the `aria-label` attribute to add an invisible, unique, non-empty label to each element with the `"banner"` role.

For example:

<CodeSnippet type="multi" light={true}>&lt;h1 id="weather"&gt;Weather portlet&lt;/h1&gt;
&lt;header aria-labelledby="weather"&gt;
   ...
&lt;/header&gt;
    
&lt;div role="banner" aria-label="Stock ticker portlet"&gt;
   ...
&lt;/div&gt;</CodeSnippet>

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 2.4.1 Bypass Blocks](https://www.ibm.com/able/requirements/requirements/#2_4_1)
[W3C WCAG 2.1 technique ARIA6](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)
[W3C WCAG 2.1 technique ARIA13](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA13)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
